<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    // 检测用户是否已登录
    if (session.getAttribute("UID") == null) {
        response.sendRedirect("../novel/login.jsp"); // 跳转到登录页面
        return; // 终止后续处理
    }
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>四叶草轻小说-个人信息</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../assets/css/sprite.css">
    <script src="../assets/js/jquery-3.3.1.js"></script>
    <script src="../assets/js/index.js" async></script>
    <%--        // 导航条样式--%>
    <style>
        .header .btn-group {
            width: 32%;
        }

        .header .btn-tab {
            line-height: 1.375rem;
        }

        .sp-dark-mode .header {
            border-bottom: 1px solid #1c1c1c;
        }

        @media (prefers-color-scheme: dark) {
            .header {
                border-bottom: 1px solid #1c1c1c;
            }
        }
    </style>
    <style>
        .scrolling-text {
            display: inline-block;
            animation: scroll 8s linear infinite; /* 设置滚动动画 */
        }
        @keyframes scroll {
            0% {
                transform: translateX(100%); /* 从右侧开始 */
            }
            100% {
                transform: translateX(-100%); /* 滚动到左侧 */
            }
        }
        body {
            /*display: flex;*/
            flex-direction: column;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            height: 100vh; /* 使页面高度为视口高度 */
            background-size: cover; /* 背景图覆盖整个页面 */
            background-position: center; /* 背景图居中 */
            font-family: 'Arial', sans-serif; /* 字体 */
        }
        h1 {
            color: #4a90e2; /* 标题颜色 */
            text-align: center; /* 文字居中 */
            margin-top: 10px; /* 增加上边距，比如50px */
        }

        p {
            font-size: 24px; /* 加大段落字体大小 */
            text-align: center; /* 文字居中 */
            font-weight: bold; /* 加粗 */
            color: black; /* 改回黑色 */
            margin: 20px 0; /* 上下间距40px，左右间距为0 */
        }
        .forminfo {
            border-radius: 8px; /* 边角圆润 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            background-image: url('../assets/images/bg.png'); /* 背景图 */
            background-repeat: no-repeat; /* 防止背景图重复 */
            background-position: center; /* 背景图居中 */
            height: 60vh; /* 使页面高度为视口高度 */
            margin-top: 20px; /* 上边距 */
            display: flex; /* 使用 flexbox 排版 */
            flex-direction: column; /* 垂直排列 */
            align-items: center; /* 水平居中 */
        }
        form {
            /*background-color: rgba(255, 255, 255, 255); !* 表单背景颜色，增加透明度 *!*/
            /*padding: 20px;*/
            border-radius: 8px; /* 边角圆润 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            background-image: url('../assets/images/bg.png'); /* 背景图 */
            background-repeat: no-repeat; /* 防止背景图重复 */
            background-position: center; /* 背景图居中 */
            height: 60vh; /* 使页面高度为视口高度 */
            margin-top: 20px; /* 上边距 */
            display: flex; /* 使用 flexbox 排版 */
            flex-direction: column; /* 垂直排列 */
            align-items: center; /* 水平居中 */
        }
        label {
            margin-top: 10px; /* 增加上边距，比如50px */
            display: block; /* 标签块级显示 */
            margin-bottom: 8px;
            font-weight: bold; /* 加粗 */
        }
        input[type="text"], input[type="email"] {
            width: 300px; /* 输入框宽度 */
            padding: 8px; /* 内边距 */
            margin-bottom: 10px; /* 下边距 */
            border: 1px solid #ccc; /* 边框 */
            border-radius: 4px; /* 边角圆润 */
        }
        input[type="submit"], .logout-button, .return-button, .update-button {
            background-color: pink; /* 信息更新按钮和返回按钮背景颜色改为粉红色 */
            color: white; /* 按钮文字颜色 */
            padding: 10px 15px; /* 按钮内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边角圆润 */
            cursor: pointer; /* 鼠标指针 */
            font-size: 16px; /* 字体大小 */
            margin: 5px; /* 按钮间距 */
            text-decoration: none; /* 去掉下划线 */
        }
        input[type="submit"]:hover, .update-button:hover {
            background-color: lightcoral; /* 悬停时提交和更新按钮颜色 */
        }
        .logout-button {
            background-color: red; /* 退出按钮背景颜色 */
            text-decoration: none; /* 去掉下划线 */
        }
        .logout-button:hover {
            background-color: darkred; /* 悬停时退出按钮颜色 */
        }
        .error {
            color: red; /* 错误信息颜色 */
        }
        .hidden {
            display: none; /* 隐藏 */
        }
        .button-container {
            display: flex; /* 使用 flexbox 排版 */
            justify-content: center; /* 水平居中 */
            gap: 10px; /* 按钮间距 */
        }
    </style>
    <script>
        function showUserInfo() {
            document.getElementById('user-info').classList.remove('hidden');
            document.getElementById('update-info').classList.add('hidden');
        }

        function showUpdateInfo() {
            document.getElementById('user-info').classList.add('hidden');
            document.getElementById('update-info').classList.remove('hidden');
        }
    </script>
</head>
<body>
<div  class="night">
    <%--    <div class="page page-home">--%>
    <div class="content">
        <header id="header" class="header header-index">
            <a href="../info/loginend.jsp" class="logo-a">
                <h1 class="logo">哔哩轻小说</h1>
            </a>
            <nav class="btn-group">
                <a href="../info/loginend.jsp" class="btn-tab active">轻小说</a>
                <a href="<c:url value="/info/info.jsp"/>" class="btn-tab">个人主页</a>
            </nav>
            <div class="header-operate red">
                <a href="<c:url value='/info/info.jsp'/>" class="icon icon-regs">
                    <span class="scrolling-text">
                        <c:out value="${sessionScope.nickname}" />
                    </span> <!-- 从session中获取昵称 -->
                </a>
            </div>
        </header>
        <!-- 页面内容 S -->
            <div id="user-info" class="forminfo">
                <h1 >用户信息</h1>
                <c:if test="${not empty nickname}">
                    <p>欢迎，${nickname}!</p>
                </c:if>
                <c:if test="${not empty UID}">
                    <p>UID: ${UID}</p>
                </c:if>
                <c:if test="${not empty username}">
                    <p>用户名: ${username}</p>
                </c:if>
                <c:if test="${not empty email}">
                    <p>你的邮箱是：${email}</p>
                </c:if>
                <c:if test="${empty nickname}">
                    <p>昵称尚未设置哦~</p>
                </c:if>
                <c:if test="${empty email}">
                    <p>邮箱尚未设置哦~</p>
                </c:if>
                <div class="button-container">
                    <button class="update-button" onclick="showUpdateInfo()">信息更新</button> <!-- 信息更新按钮 -->
                    <a href="../info/loginend.jsp" class="update-button">返回主页</a> <!-- 退出登录按钮 -->
                </div>
            </div>

            <div id="update-info" class="hidden">
                <form action="${pageContext.request.contextPath}//InfoServlet" method="post">
                    <label for="nickname">新昵称：</label>
                    <input type="text" id="nickname" name="nickname" value="${nickname}" required>
                    <br>
                    <label for="email">新邮箱：</label>
                    <input type="email" id="email" name="email" value="${email}" required>
                    <br>
                    <div class="button-container">
                        <input type="submit" value="提交"> <!-- 提交按钮 -->
                        <button type="button" class="return-button" onclick="showUserInfo()">返回</button> <!-- 返回按钮 -->
                        <a href="../info/logout.jsp" class="logout-button">退出登录</a> <!-- 退出登录按钮 -->
                    </div>
                </form>
            </div>

            <c:if test="${not empty param.error}">
                <p class="error">错误信息: ${param.error}</p>
            </c:if>
        </div>
    </div>
</div>
</body>
</html>